<!--  -->
<template>
    <div class='publishTask'>
        <!--        头部-->
        <head-top></head-top>
        <div style="width: 100%;height: 50px;"></div>
        <div class="publishTaskCon">
            <div class="item">
                <div class="titleLeft">任务标题</div>
                <div class="right"><input placeholder="请输入" v-model="form.title"/></div>
            </div>

            <div class="item itemImg">
                <div class="titleLeft">群二维码</div>
                <div class="right uploadimg">
                    <div class="imgs">
                        <div class="uploadBut">
                            上传
                            <input type="file" ref="upFile" placeholder="的" @change="File()"></input>
                        </div>
                        <div class="preview" ref="preview">
                            <img :src="form.qrcode"/>
                            <div v-if="previewFlag" class="bg"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item itemType">
                <div class="titleLeft">任务类型</div>
                <div class="right selectType">
                    <select class="select" v-model="form.taskType">
                        <option value="none" selected>选择类型</option>
                        <option v-for="(item,index) in taskTypes" :value="item.menuCode">{{ item.menuName }}</option>
                    </select>
                </div>
            </div>

            <div class="item itemStore">
                <div class="titleLeft">选择店铺</div>
                <div class="right rightstore">
                    <div class="storeChoose">
                        <input placeholder="请选择店铺" disabled v-model="form.shopName"/>
                        <div class="iconxiala" @click="iconxiala"><span class="iconfont icon-xiala"></span></div>
                        <div class="uls storeLicur" v-show="storeFlag">
                            <ul>
                                <li v-for="(item) in shopList">
                                    <div class="lis" @click="clickstoreval($event,item)">
                                        {{ item.shopName }}
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>

            <div class="item">
                <div class="titleLeft">商家放单账号</div>
                <div class="right">
                    <input placeholder="请输入" v-model="form.orderAccount"/>
                </div>
            </div>

            <div class="item itemtasktag">
                <div class="titleLeft">任务标签</div>
                <div class="right">
                    <div class="ritTaskTag">
                        <ul>
                            <li v-for="item in tagList" @click="clickTag(item) "
                                :class="[{curlis:clickTagList.includes(item.tagCode)}]">
                                {{ item.tagName }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="titleLeft">新人可做</div>
                <div class="right switch">
                    <van-switch v-model="form.newManDoAble" size="24px"/>
                </div>
            </div>
            <div class="item">
                <div class="titleLeft">是否实名</div>
                <div class="right switch">
                    <van-switch v-model="form.isRealname" size="24px"/>
                </div>
            </div>
            <div class="item">
                <div class="titleLeft">需要人数</div>
                <div class="right">
                    <input placeholder="请输入" type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" v-model="form.needMan"/>
                </div>
            </div>

            <div class="item">
                <div class="titleLeft">本金</div>
                <div class="right">
                    <input placeholder="范围样式:下限金额/上限金额" v-model=" form.capital"/>
                </div>
            </div>

            <div class="item itemType">
                <div class="titleLeft">本金还款时间</div>
                <div class="right selectType">
                    <select class="select" @click="selectCapital">
                        <input hidden v-model="form.capitalReturnTime"></input>
                        <option value="none" selected>点击选择本金返还时间</option>
                        <option v-for="i in balanceList" :value="i.itemValue">{{ i.itemText }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="item">
                <div class="titleLeft">佣金</div>
                <div class="right">
                    <input placeholder="范围样式:下限金额/上限金额" v-model="form.commission"/>
                </div>
            </div>

            <div class="item itemType">
                <div class="titleLeft">佣金还款时间</div>
                <div class="right selectType">
                    <select class="select brokerages" @click="brokerage">
                        <option value="none" selected>点击选择佣金返还时间</option>
                        <option v-for="i in balanceList" :value="i.itemValue">{{ i.itemText }}</option>
                    </select>
                </div>
            </div>

            <div class="textarea">
                <p>任务要求</p>
                <textarea placeholder="点击输入任务要求" v-model="form.taskDemand"> </textarea>
                <div>0/30</div>
            </div>
            <!-- 内容板块结束标签-->
        </div>

        <div style="width: 100%;height: 60px;background: #f8f8f8;"></div>
        <div class="resetBut">
            <div class="button" @click="clickAdd">添加</div>
        </div>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from ‘《组件路径》‘;
    import {Toast} from 'vant';
    import headTop from "../../components/base/headTop.vue"
    import comApi from '@/api/comapi'
    import navApi from '@/api/nav'
    import shopApi from '@/api/shop'
    import taskApi from '@/api/task'

    export default {
//import引入的组件需要注入到对象中才能使用
        components: {
            headTop
        },
        data() {

            return {
                shopParams: {
                    query: '',
                    shopStatus: "2", // 正常
                    pageNo: 1,
                    pageSize: 1000
                },
                shopList: [],
                form: {
                    "capital": "",
                    "capitalReturnTime": "48h",
                    "commission": "",
                    "commissionReturnTime": "24h",
                    "isRealname": true,
                    "needMan": "",
                    "newManDoAble": true,
                    "orderAccount": "",
                    "qrcode": "",
                    "shopId": "",
                    "taskDemand": "",
                    "taskTags": "",
                    "taskType": "new_man",
                    "title": "",


                    shopName: '', // 无需提交 前台显示
                },
                fileType: ['image/png', 'image/jpeg'],
                taskTypes: [],
                tagList: [],
                balanceList: [],
                Bsieks: "",
                previewFlag: true,
                storeval: '',
                storeFlag: false,
                clickTagList: [], // 提交的时候进行拼接
                checked: false,
                checked2: false
            };
        },
//监听属性 类似于data概念
        computed: {},
//监控data中的数据变化
        watch: {},

        created() {
            this.taskTypeLoad()
            this.myShopLoad()
            this.tagsLoad()
            this.balanceLoad()
        },
        methods: {
            // 提交
            clickAdd() {

                console.log("提交", this.form)
                // TODO 未做前端校验
                if (this.form.title == '') {
                    this.$toast('请输入标题任务任务')
                    return
                }
                if (this.form.qrcode == '') {
                    this.$toast('请上传二维码')
                    return
                }
                if (this.form.taskType == '') {
                    this.$toast('请选择任务类型')
                    return
                }
                if (this.form.shopName == '') {
                    this.$toast('请选择店铺')
                    return
                }
                if (this.clickTagList.length == 0) {
                    this.$toast('请选择任务标签')
                    return
                }
                if (this.form.needMan == '') {
                    this.$toast('请输入需要人数')
                    return
                }
                if (this.form.capital == '') {
                    this.$toast('请输入本金')
                    return
                }
                if (this.form.capitalReturnTime == '') {
                    this.$toast('请选择本金还款时间')
                    return
                }
                if (this.form.commission == '') {
                    this.$toast('请输入佣金')
                    return
                }
                if (this.form.commissionReturnTime == '') {
                    this.$toast('请选择佣金还款时间')
                    return
                }
                if (this.form.taskDemand == '') {
                    this.$toast('请输入任务要求')
                    return
                }
                this.form.taskTags = this.clickTagList.join()
                this.form.isRealname = this.form.isRealname ? 1 : 0;
                this.form.newManDoAble = this.form.newManDoAble ? 1 : 0;
                taskApi.publishTask(this.form).then(res => {
                    Toast(res.message)
                    this.$router.back()
                })

            },
            taskTypeLoad() {
                navApi.getIndexNav().then(res => {
                    var map = res.data.records.map(item => item);

                    this.taskTypes = map
                })
            },
            selectCapital(e) {
                for (var a = 0; a <= e.path[0].length; a++) {
                    if (e.path[0][a].selected == true) {
                        console.log(e.path[0][a]._value)
                        this.form.capitalReturnTime = e.path[0][a]._value
                    }
                }
            },
            brokerage(e) {
                for (var a = 0; a <= e.path[0].length; a++) {
                    if (e.path[0][a].selected == true) {
                        this.form.commissionReturnTime = e.path[0][a]._value
                    }
                }

            },
            // 查询我的店铺并且审核通过
            myShopLoad() {
                shopApi.myList(this.shopParams).then(res => {
                    this.shopList = res.data.records
                })
            },
            tagsLoad() {
                comApi.getTagList().then(res => {
                    this.tagList = res.data.records
                })
            },
            balanceLoad() {
                comApi.getDictList("return_money_time").then(res => {
                    this.balanceList = res.data.records
                })
            },
            File() {
                let file = this.$refs.upFile.files[0];
                if (this.fileType.indexOf(file.type) < 0) {
                    Toast('请上传 jpg或png 格式图片');
                    return false;
                }
                let formData = new FormData();
                formData.append("file", file)
                comApi.fileUpload(formData).then(res => {
                    this.form.qrcode = res.data
                    this.previewFlag = false
                })
                return true;
            },
            iconxiala() {
                this.storeFlag = !this.storeFlag
            },
            clickstoreval(event, item) {
                this.storeval = event.target.innerHTML
                this.storeFlag = false
                this.form.shopId = item.id
                this.form.shopName = item.shopName
                console.log(event);
            },
            clickTag(i) {
                console.log(i.tagCode)
                console.log(this.clickTagList)
                if (this.clickTagList.includes(i.tagCode)) {
                    let a = this.clickTagList.findIndex((item) => item == i.tagCode);
                    this.clickTagList.splice(a, 1)
                } else {
                    this.clickTagList.push(i.tagCode)
                }
            }
        },


        mounted() {

        },
        beforeCreate() {
        },
        beforeMount() {
        },
        beforeUpdate() {
        },
        updated() {
        },
        beforeDestroy() {
        },
        destroyed() {
        },
        activated() {
        }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang="less" scoped>
    .publishTask {
        width: 100%;
        min-height: 100%;
        background: #f8f8f8;
    }

    .publishTaskCon {
        width: 100%;
        font-size: 14px;
        color: #949ea4;

        .item {
            padding: 10px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e7e7e7;

            .titleLeft {
                line-height: 30px;
            }

            .right {
                flex: 1;
                padding-left: 30px;

                input {
                    height: 30px;
                    width: 100%;
                    background: #f8f8f8;
                    color: black;
                }

            }

            .switch {
                display: flex;
                align-items: center;
            }
        }

        .itemImg {
            padding-bottom: 0;
            border: none;

            .uploadimg {
                .uploadBut {
                    width: 50px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    padding: 0 20px;
                    margin: 0 0 15px 30px;
                    /*color: white;*/
                    background: #f8f5be;
                    border-radius: 20px;
                    position: relative;
                    overflow: hidden;

                    input {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 2px;
                        left: -10px;
                        opacity: 0;
                    }

                }
            }

            .preview {
                width: 100px;
                height: 100px;
                margin-left: 20px;
                position: relative;

                img {
                    width: 100px;
                    height: 100px;
                    border: none;
                    outline: none;
                }

                .bg {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: #f8f8f8;
                }

            }
        }

        .itemType {
            height: 30px;

            .selectType {
                /*margin-left: 20px;*/

                .select {
                    height: 30px;
                    width: 100%;
                    border: 0;
                    background: #f8f8f8;
                }
            }

        }

        .itemStore {
            .rightstore {
                .storeChoose {
                    display: flex;
                    align-items: center;
                    line-height: 30px;
                    position: relative;

                    input {
                        flex: 1;
                        height: 30px;
                        color: black;
                    }

                    .iconxiala {
                        padding: 10px;

                        span {
                            font-size: 14px;
                        }
                    }

                    .uls {
                        width: 100%;
                        height: 200px;
                        position: absolute;
                        left: 0;
                        top: 50px;
                        border-radius: 5px;
                        box-shadow: 0 0 7px 3px #e2e2e2;
                        z-index: 100;
                        background: white;

                        ul {
                            width: 100%;
                            height: 200px;
                            overflow-y: scroll;

                            li {
                                padding: 10px;

                                .lis {
                                    border-bottom: 1px solid #e2e2e2;
                                }
                            }
                        }
                    }

                }
            }
        }

        .itemtasktag {
            .ritTaskTag {
                width: 100%;

                ul {
                    display: flex;
                    align-items: center;

                    li {
                        padding: 5px 15px;
                        color: black;
                    }

                    .curlis {
                        background: #2d6cfe;
                        border-radius: 5px;
                        color: white;
                    }
                }
            }
        }

        .textarea {
            padding: 10px;
            border-bottom: 1px solid #e7e7e7;

            p {
                color: #9299a0;
                margin-bottom: 20px;
            }

            textarea {
                width: 100%;
                height: 150px;
                background: #f8f8f8;
                color: black;
            }

            div {
                width: 100%;
                text-align: right;
                color: #9299a0;
                margin-top: 10px;
            }
        }
    }

    .storeLicur::after {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -2.5px;
        border-bottom: 5px solid white;
        border-top: 5px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }

    .resetBut {
        width: 100%;
        background: white;
        position: fixed;
        left: 0;
        bottom: 0;
        padding-bottom: 10px;

        .button {
            /*color: white;*/
            margin: 0 auto;
            width: 90%;
            border-radius: 30px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #f8f5be;
        }

    }
</style>
